<template>
  <div style="display: inline-block;margin-left: 10px" v-if="data.sku !== ''">
    <el-button @click="createSkuInfo(data)" type="warning">{{$t('stock.Generate SKU tags')}}</el-button>

    <el-dialog
      :title="$t('stock.GenerateSKUTagsTextOne')"
      :visible.sync="createSkuInfoListLoading"
      :modal-append-to-body="false"
      width="600px"
      style="max-height: 800px;overflow-y: auto;"
    >
      <div class="mgb20" style="font-size: 16px">
        {{$t('stock.GenerateSKUTagsTextTwo')}}
      </div>

      <div class="mgb10 mgl10" v-for="(item, index) in uniqueSkuArr" :key="index">
        <el-button class="font-bold" @click="selectSku(item)" style="font-size: 14px;width: 300px; text-align: left" type="primary" plain>
          {{item.sku}}
        </el-button>
      </div>
      <div class="mgb20"></div>
    </el-dialog>

    <el-dialog
      :title="$t('stock.Generate SKU tags')"
      :visible.sync="selectSkuInfoListLoading"
      :modal-append-to-body="false"
      width="750px"
      style="max-height: 800px;overflow-y: auto;"
    >
      <div style="display: flex; justify-content: center; align-items: center; margin-bottom: 40px">
        <div style="border: 1px solid rgb(230, 235, 245);border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0; width: 550px; height: 230px;display: flex; justify-content: center; align-items: center;">
          <div style="border: 3px solid rgba(121, 121, 121, 1); width: 450px; height: 180px; border-radius: 4px;">
            <div style="display: flex; flex-direction: row; width: 450px; font-size: 18px; font-weight: bold; height: 30px">
              <div v-show="skuUserShowInfo" style="margin-left: 15px;margin-top: 15px;">{{skuUserInfo}}</div>
              <div v-show="skuManufactureShowInfo" style="margin-left: auto; margin-right: 25px;margin-top: 15px">{{skuManufactureInfo}}</div>
            </div>
            <div style="display: flex; justify-content: center; align-items: center; margin-top: 15px;">
              <el-image
                style="width: 350px; height: 80px"
                :src="skuInfoImg"
                v-if="isImgLoading === false"
              >
              </el-image>
              <template v-if="isImgLoading === true">
                <div style="display: flex; justify-content: center; align-items: center; height: 80px; font-size: 18px; font-weight: bold;">
                  <div>
                    Loading...
                  </div>
                </div>
              </template>
            </div>
            <div style="display: flex; justify-content: center; align-items: center; margin-top: 10px;">
              <div style="font-size: 18px; font-weight: bold;">{{skuInfo}}</div>
            </div>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-content: center; align-items: center; margin-bottom: 45px">
        <div style="display: flex; flex-direction: row; width: 615px; font-size: 18px; font-weight: bold;">
          {{$t('stock.GenerateSKUTagsTextThree')}}：
          <el-checkbox v-model="skuUserShowInfo" :label="$t('stock.User Name')" class="skuCheckbox" style="margin-left: 70px"/>
          <el-checkbox v-model="skuManufactureShowInfo" :label="$t('stock.Place of manufacture')" class="skuCheckbox" style="margin-left: 50px"/>
        </div>
      </div>
      <div style="display: flex; justify-content: center; align-items: center; margin-bottom: 45px">
        <div style="display: flex; flex-direction: row; width: 615px; font-size: 18px; font-weight: bold;">
          {{$t('stock.GenerateSKUTagsTextFour')}}：
          <el-input v-model="skuPrintNum" style="width: 100px; margin-left: 30px; margin-right: 20px; position: relative; top: -5px"/>
          <span style="color: rgb(170, 170, 170);font-size: 14px;font-weight: normal;">{{ $t('stock.GenerateSKUTagsTextFive') }}</span>
        </div>
      </div>
      <div style="display: flex; justify-content: center; align-items: center;">
        <div style="display: flex; flex-direction: row; width: 615px; font-size: 18px; font-weight: bold;">
          {{$t('stock.GenerateSKUTagsTextSix')}}：
          <el-select v-model="dimensionType" placeholder="请选择" style="width: 130px; margin-left: 70px; position: relative; top: -5px">
            <el-option
              v-for="item in dimensionDisposition"
              :key="item.type"
              :label="item.description"
              :value="item.type">
            </el-option>
          </el-select>
          <!--<el-input v-model="skuWidth" style="width: 100px; margin-left: 30px; margin-right: 20px; position: relative; top: -5px"/>-->
          <!--<el-input v-model="skuHeight" style="width: 100px; margin-left: 30px; margin-right: 20px; position: relative; top: -5px"/>-->
        </div>
      </div>

      <div slot="footer" class="dialog-footer" style="text-align: left; margin-bottom: 20px">
        <el-button @click="selectSkuInfoListLoading = false" size="large" style="margin-right: 30px;">{{ $t('common.cancel') }}</el-button>
        <el-button type="primary" @click="downloadSkuInfoData()" :loading="downloadSkuInfoDataLoading" :disabled="disabled" size="large" style="margin-right: 30px;">{{ $t('common.download') }}</el-button>
        <el-button type="danger" @click="printSkuInfoData()" :loading="printSkuInfoDataLoading" :disabled="disabled" size="large" style="margin-right: 30px;">{{ $t('common.print') }}</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="$store.getters.appStartDialog"
      width="600px"
      :modal-append-to-body="false"
      :title="getMDName()+ '-' + $t('hd.Start detection')"
      :close-on-press-escape="canCloseAppDialog"
      :show-close="canCloseAppDialog"
      :before-close="closeDialog"
      :close-on-click-modal="false"
    >
      <div class="dialog-content">
        <div class="app-check-tips">
          <div>
            {{$t('hd.checkText1',{domainName: getDomainName(),HDName:getMDName()})}}
            <!--            1. 请等待{{getDomainName()}}硬件APP「{{getMDName()}}」完成设备连接-->
          </div>
          <div>
            {{$t('hd.checkText2',{HDName:getMDName()})}}
            <!--            2. 如果「{{getMDName()}}」未能自动打开，请手动开启-->
          </div>
        </div>
        <el-form
          label-width="150px"
          label-suffix=":"
          style="font-size: 16px"
        >
          <el-form-item
            :label="$t('hd.Service Connection Status')"
            prop="account"
          >
            <template v-if="$store.getters.appCheckStatusAppStart">
              <span class="success-color">{{$t('hd.Successfully connected')}}<i class="el-icon-success"></i></span>
            </template>
            <template v-else>
              <span class="wait-color">{{$t('hd.Waiting to connect')}}<i class="el-icon-loading"></i></span>
            </template>
          </el-form-item>
          <el-form-item
            :label="$t('hd.APP version')"
            prop="password"
          >
            <template v-if="!$store.getters.appCheckStatusAppStart">
              <span class="wait-color">{{ $t('hd.Waiting to connect') }}<i class="el-icon-loading"></i></span>
            </template>
            <template v-else-if="$store.getters.appCheckStatusAppVersion === $store.getters.appVersion">
              <span class="success-color">{{ $t('hd.Version matching successful') }}<i class="el-icon-success"></i></span>
            </template>
            <template v-else>
              <!--              <span class="error-color">版本匹配错误，当前系统版本{{appVersion}},APP版本{{appCheckStatusAppVersion}}<i class="el-icon-error"></i></span>-->
              <span class="error-color">{{$t('hd.Version matching error',{version1: $store.getters.appVersion,version2:$store.getters.appCheckStatusAppVersion})}}<i class="el-icon-error"></i></span>
            </template>
          </el-form-item>
          <el-form-item
            :label="$t('hd.system printer')"
          >
            <template v-if="!$store.getters.appCheckStatusAppStart">
              <span class="wait-color">{{ $t('hd.Waiting to connect') }}<i class="el-icon-loading"></i></span>
            </template>
            <template v-else-if="$store.getters.appCheckStatusPrintersState">
              <span class="success-color">{{ $t('hd.Successfully obtained configuration') }}<i class="el-icon-success"></i></span>
            </template>
            <template v-else>
              <span class="error-color">{{ $t('hd.Failed to obtain configuration') }}<i class="el-icon-error"></i></span>
            </template>

          </el-form-item>
          <el-form-item
            :label="$t('hd.The currently selected printer')"
          >
            <template v-if="!$store.getters.appCheckStatusAppStart">
              <span class="wait-color">{{ $t('hd.Waiting to connect') }}<i class="el-icon-loading"></i></span>
            </template>
            <template v-else-if="$store.getters.appCheckStatusPrintersState">
              <template v-if="$store.getters.printers.length === 0">
                <span class="error-color">{{ $t('hd.The current system has not configured a printer') }}<i class="el-icon-error"></i></span>
              </template>
              <template v-else>
                <el-select
                  v-model="$store.getters.currentPrinter"
                  :placeholder="$t('hd.Please select a printer')"
                  style="width: 300px"
                  value-key="name"
                  @change="testPrinter"
                >
                  <el-option
                    v-for="item in $store.getters.printers"
                    :key="item.name"
                    :label="`${item.description}(${item.displayName || item.description})`"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </template>

            </template>
            <template v-else>
              <span class="error-color">{{ $t('hd.Failed to obtain configuration') }}<i class="el-icon-error"></i></span>
            </template>

          </el-form-item>
          <el-form-item
            :label="$t('hd.Electronic scale')"
          >
            <template v-if="!$store.getters.appCheckStatusAppStart">
              <span class="wait-color">{{ $t('hd.Waiting to connect') }}<i class="el-icon-loading"></i></span>
            </template>
            <template v-else-if="$store.getters.appCheckStatusScalesState === $store.getters.scalesStateMapSearch">
              <span class="wait-color">{{ $t('hd.Device search in progress') }}  <i class="el-icon-loading"></i></span>
            </template>
            <template v-else-if="$store.getters.appCheckStatusScalesState === $store.getters.scalesStateMapConnected">
              <span class="wait-color">
                <template v-if="$store.getters.scaleDeviceInfo && $store.getters.scaleDeviceInfo.subType === 'virtual-serial-port'">
                  {{$t('hd.Wireless in device preparation')}}
                </template>
                <template v-else>
                  {{$t('hd.Device preparation wired')}}
                </template>
                <!--                设备准备中 {{ scaleDeviceInfo ? `(${scaleDeviceInfo.subType === 'virtual-serial-port' ? '无线' : '有线'})` : '' }} -->
                <i class="el-icon-loading"></i>
              </span>
            </template>
            <template v-else-if="$store.getters.appCheckStatusScalesState === $store.getters.scalesStateMapTransform">
              <span class="success-color">
                <template v-if="$store.getters.scaleDeviceInfo && $store.getters.scaleDeviceInfo.subType === 'virtual-serial-port'">
                  {{$t('hd.Device completed connecting wirelessly')}}
                </template>
                <template v-else>
                  {{$t('hd.Device completed connecting wired')}}
                </template>
                <!--                设备完成连接 {{ scaleDeviceInfo ? `(${scaleDeviceInfo.subType === 'virtual-serial-port' ? '无线' : '有线'})` : '' }} -->
                <i class="el-icon-success"></i>
              </span>
            </template>
            <template v-else-if="$store.getters.appCheckStatusScalesState === $store.getters.scalesStateMapDiscontented">
              <span class="error-color">{{ $t('hd.Disconnect') }} <i class="el-icon-error"></i></span>
            </template>
            <template v-else>
              <span class="error-color">{{ $t('hd.connection exception') }} <i class="el-icon-error"></i></span>
            </template>

          </el-form-item>

        </el-form>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import {createSkuInfoData, downloadSkuInfoData, printSkuInfoData} from "@/api/stock";
import {io} from "socket.io-client";
import {v4 as uuidv4} from "uuid";
import {getDomainName, getMDName} from "@/utils";

export default {
  name: "PrintSkuInfo",
  props:{
    data:{
      type: Object,
    },
  },
  computed:{
    canCloseAppDialog(){
      if (this.$store.getters.appCheckStatusAppStart && this.$store.getters.appCheckStatusPrintersState && this.$store.getters.appCheckStatusAppVersion === this.$store.getters.appVersion) {
        return true
      }
      return false
    },
    uniqueSkuArr(){
      if(!this.data.goodsList){
        return []
      }
      return this.data.goodsList.filter( item => item.isSystemLabel || item.isSystem)
        .map(item => {
          return {
            sku: item.sku,
            userName: this.data.userAccount,
            barcode: item.barcode,
          }
        })
    },
  },
  data(){
    return {
      createSkuInfoListLoading: false,
      selectSkuInfoListLoading: false,
      skuInfoImg: '',
      skuUserShowInfo: true,
      skuManufactureShowInfo: true,
      skuPrintNum: 1,
      skuUserInfo: '',
      skuManufactureInfo: '',
      skuInfo: '',
      skuBarcode: '',
      downloadSkuInfoDataLoading: false,
      printSkuInfoDataLoading: false,
      isImgLoading: true,
      disabled:false,
      dimensionType: 1,
      dimensionDisposition: [
        {'description': '7cm * 3cm', 'type': 1, 'offset': [0, 0], format: [70, 30],},
        {'description': '8cm * 3cm', 'type': 2, 'offset': [10, 0], format: [80, 30],},
        {'description': '9cm * 3cm', 'type': 3, 'offset': [20, 0], format: [90, 30],},
        {'description': '10cm * 3cm', 'type': 4, 'offset': [30, 0], format: [100, 30],},
      ],
      skuWidth: 0,
      skuHeight: 0,
    }
  },
  methods:{
    getMDName,
    createSkuInfo(row){
      console.log(this.data)
      console.log(this.uniqueSkuArr)
      if (this.uniqueSkuArr.length > 1) {
        this.createSkuInfoListLoading = true
      } else {
        this.selectSku(this.uniqueSkuArr[0])
      }
    },
    selectSku(row){
      this.isImgLoading = true
      this.createSkuInfoListLoading = false
      this.selectSkuInfoListLoading = true
      this.skuUserShowInfo = true
      this.skuManufactureShowInfo = true
      this.skuUserInfo = row.userName || row.userAccount
      this.skuManufactureInfo = 'Made In China'
      this.skuInfo = row.sku
      this.skuBarcode = row.barcode
      this.skuPrintNum = 1
      this.disabled = true
      createSkuInfoData({'sku': row.barcode})
        .then(res=>{
          this.disabled = false
          //获取对应的sku图片
          if (res.status === 200) {
            // 获取Blob对象
            var blob = res.data
            // 创建Blob对象的URL
            this.skuInfoImg = URL.createObjectURL(blob)
            this.isImgLoading = false
          }
        })
    },
    downloadSkuInfoData(){
      this.downloadSkuInfoDataLoading = true
      let skuUserInfo = ''
      if (this.skuUserShowInfo === true) {
        skuUserInfo = this.skuUserInfo
      }
      let skuManufactureInfo = ''
      if (this.skuManufactureShowInfo === true) {
        skuManufactureInfo = this.skuManufactureInfo
      }
      let offset = this.dimensionDisposition.find(item => item.type === this.dimensionType).offset
      if (this.skuWidth !== 0 || this.skuHeight !== 0) {
        offset = [this.skuWidth, this.skuHeight];
      }
      let data = {
        'skuInfo' : this.skuInfo,
        'skuUserInfo' : skuUserInfo,
        'skuManufactureInfo' : skuManufactureInfo,
        'skuPrintNum' : this.skuPrintNum,
        'offset' : offset,
        skuBarcode: this.skuBarcode,
      }
      downloadSkuInfoData(data)
        .then(res=>{
          this.downloadSkuInfoDataLoading = false
          if(res.type === 'application/json'){
            this.$message({
              message: '下载sku标签失败，请稍后再尝试',
              duration : 5000,
              type: 'error',
              showClose: true,
            });
            return;
          }

          const pdfFile = window.URL.createObjectURL(
            new Blob([res.data], { type: "application/pdf" })
          );
          // 跳转页面预览
          window.open(pdfFile);
          // 60秒后释放
          setTimeout(()=>{
            URL.revokeObjectURL(pdfFile); //释放URL对象
          },60000)
        })
    },
    async printSkuInfoData(){
      const delay = () => {
        return new Promise(resolve => {
          setTimeout(() => {
            console.log('首次链接硬件等待10秒');
            resolve(); // 解析Promise，表示延迟期结束
          }, 10000);
        });
      };

      this.printSkuInfoDataLoading = true
      if (this.$store.getters.isLinkApp === false) {
        //第一次启动硬件
        this.$store.dispatch("printHardware/setAppStartDialog", true);
        window.open('minoshippinghardware://')
        this.linkApp()
        this.$store.dispatch("printHardware/setIsLinkApp", true);
        await delay();
      }
      let skuUserInfo = ''
      if (this.skuUserShowInfo === true) {
        skuUserInfo = this.skuUserInfo
      }
      let skuManufactureInfo = ''
      if (this.skuManufactureShowInfo === true) {
        skuManufactureInfo = this.skuManufactureInfo
      }
      let offset = this.dimensionDisposition.find(item => item.type === this.dimensionType).offset
      if (this.skuWidth !== 0 || this.skuHeight !== 0) {
        offset = [this.skuWidth, this.skuHeight];
      }
      let data = {
        'skuInfo' : this.skuInfo,
        'skuUserInfo' : skuUserInfo,
        'skuManufactureInfo' : skuManufactureInfo,
        'skuPrintNum' : this.skuPrintNum,
        'offset' : offset,
        skuBarcode: this.skuBarcode,
      }
      printSkuInfoData(data)
        .then(res=>{
          this.printSkuInfoDataLoading = false
          if(res.type === 'application/json'){
            this.$message({
              message: '打印sku标签失败，请稍后再尝试',
              duration : 5000,
              type: 'error',
              showClose: true,
            });
            return;
          }

          if (this.$store.getters.currentPrinter === '' || this.$store.getters.currentPrinter === null) {
            return false
          }

          // 打印机打印
          const data = {
            pdfData: res.data,
            printerName: this.$store.getters.currentPrinter.name,
          }
          this.sendSocket('print', data,null);
        })
    },
    linkApp(){
      new Promise((resolve, reject) => {
        this.$store.dispatch("printHardware/setSocket", io('ws://127.0.0.1:18232'));

        this.$store.getters.socket.on('connect', () => {
          this.$store.dispatch("printHardware/setAppCheckStatusAppStart", true);
          // 初始化数据
          this.serverDataInit()
        });
        this.$store.getters.socket.on('connect_error', (error) => {
          console.log('connect_error')
          // this.addMessage(false, "服务器连接错误");
        });
        this.$store.getters.socket.on('error', (error) => {
          console.error("An error occurred:", error);
        });
        this.$store.getters.socket.on('disconnect', (reason) => {
          // this.addMessage(false, "服务器断开链接");
          // console.log('disconnect')
          this.resetDataInit()
        });

        // 接收 'message' 事件
        this.$store.getters.socket.on('message', (message) => {
          if (!message || !message.type || !message.data) {
            console.error("接收信息错误", message);
            return;
          }
          const uuid = message.uuid
          const data = message.data;

          switch (message.type) {
            // 打印机配置
            case 'printerConfigs':
              if (data.error === 0) {
                this.$store.dispatch("printHardware/setPrinters", data.printerList);
                // this.addMessage(true, '获取系统打印机成功');
                if (this.$store.getters.printers && !this.$store.getters.currentPrinter) {
                  this.$store.getters.printers.some(printer => {
                    if (printer.isDefault) {
                      // this.addMessage(true, '选择默认打印机');
                      this.$store.dispatch("printHardware/setCurrentPrinter", printer);
                      return true;
                    }
                  });
                }
                this.$store.dispatch("printHardware/setAppCheckStatusPrintersState", true);
              } else {
                // console.log('获取系统打印机失败' + data.message);
                // this.addMessage(false, '获取系统打印机失败' + data.message);
                this.$store.dispatch("printHardware/setAppCheckStatusPrintersState", false);
                this.$store.dispatch("printHardware/setCurrentPrinter", null);
              }
              break;

            // 打印结果
            case 'printResult':
              if (data.error === 0) {
                this.$store.dispatch("printHardware/setCurrentPrinterStatus", 3);
                if(this.$store.getters.printerPDFType === 2){
                  this.$store.dispatch("printHardware/setPrinterTestLoading", false);
                }
              } else {
                this.$store.dispatch("printHardware/setCurrentPrinterStatus", -1);
              }
              break;
            // 电子秤状态
            case 'state':
              if (data.error === 0) {
                // console.log('scales state', data.info.state);
                this.$store.dispatch("printHardware/setScaleDeviceInfo", data.info);
                this.$store.dispatch("printHardware/setAppCheckStatusScalesState", data.info.state);
              } else {
                // console.log('电子秤状态异常', data.message);
                this.$store.dispatch("printHardware/setScalesWeight", 0);
                this.$store.dispatch("printHardware/setAppCheckStatusScalesState", this.$store.getters.scalesStateMapError);
              }
              break;

            // 电子秤读数
            case 'weight':
              this.$store.dispatch("printHardware/setScalesWeight", this.formatWeight(data.text));
              break;

            // 版本
            case 'version':
              this.$store.dispatch("printHardware/setAppCheckStatusAppVersion", data.version);
              break;

            // 其他异常状态
            case 'paramsError':
              console.error('paramsError', data.message, message.uuid)
              break;
            case 'systemError':
              console.error('systemError', data.message, message.uuid)
              break;

            default:
              console.error("接收信息异常", message);
              break;
          }


        });
      })
    },
    closeDialog(){
      this.$store.dispatch("printHardware/setAppStartDialog", false);
    },
    // 获取域名名
    getDomainName(){
      const name = getDomainName();
      return name.charAt(0).toUpperCase() + name.slice(1);
    },
    // 服务数据初始化
    serverDataInit() {
      // 打印机每30s 获取一次打印机配置
      this.sendSocket('getVersion');
      this.sendSocket('getPrinterConfigs');
      this.$store.dispatch("printHardware/setPrinterInterval", setInterval(() => {
        this.sendSocket('getPrinterConfigs');
      }, 30000));

      // 开始获取一次秤的状态
      this.sendSocket('getState');
    },
    // 发送信息
    sendSocket(type, data = null, uuid = null) {
      if (this.$store.getters.socket && this.$store.getters.socket.connected) {
        if (uuid === null) {
          uuid = uuidv4();
        }

        // console.log("发送： " + type + uuid);
        const message = {
          type,
          uuid,
          data,
          timestamp: (new Date()).getTime(),
        };
        this.$store.getters.socket.emit('message', message);
      }
    },
    resetDataInit(){
      if(this.$store.getters.printerInterval){
        clearInterval(this.$store.getters.printerInterval)
      }
      this.$store.dispatch("printHardware/setAppCheckStatusAppStart", false);
      this.$store.dispatch("printHardware/setAppCheckStatusPrintersState", false);
      this.$store.dispatch("printHardware/setAppCheckStatusScalesState", '');
      this.$store.dispatch("printHardware/setAppCheckStatusAppVersion", null);
      // this.appStartDialog = true
    },
    // 将电子秤读取的字符 转成对应的数字
    formatWeight(text){
      const unit = text.slice(-2);
      let weight = 0;
      if(unit === 'kg'){
        weight = Number(text.slice(0,-2)) * 1000
      }else if(unit === 'lb'){
        weight = Number(text.slice(0,-2)) * 453.59237
      }else{
        weight = Number(text.slice(0,-1))
      }
      return Math.ceil(weight)
    },
    testPrinter(){
      console.log(this.$store.getters.printers)
      console.log(this.$store.getters.currentPrinter)
    },
  }
}
</script>

<style lang="scss">
  .skuCheckbox .el-checkbox__label {
    font-size: 18px;
  }
</style>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px 85px;

  .header{
    .header-title{
      font-weight: bold;
      font-size: 24px;
    }
  }
  .content{
    padding: 20px 0 0;
    .header-tips{
      font-size: 14px;
      //font-weight: bold;
      color: #FF0000;
      margin-top: 10px;
      padding: 10px;
      width: 600px;
      border: 1px dotted #FF0000;
    }
    .picking-goods-tips{
      font-size: 14px;
      //font-weight: bold;
      color: #409eff;
      margin-top: 10px;
      padding: 10px;
      width: 400px;
      border: 1px dotted #409eff;
      margin-left: 50px;
    }
    .scanner-text{
      margin-top: 20px;
    }
    .scanner-body{
      margin-top: 30px;
    }
  }
}
.wait-color{
  color: #409eff;
}
.success-color{
  color: #67c23a;
}
.error-color{
  color: #f56c6c;
}

.order-card{
  width: 800px;
  .order-body{
    display: flex;
  }
  .left{
    width: 150px;
    text-align: center;
    vertical-align: middle;
  }
  .right{
    width: 60%;
    .order-card-label{
      font-size: 14px;
    }
    .order-card-text{
      font-size: 14px;
    }
  }
}


.remark-shipping{
  color: #409EFF;
}
.remark-delivery{
  color: #FF0000;
  font-weight: bold;
}

.order-package{
  margin-top: 10px;
  display: flex;
}
.printer-content{
  margin-top: 10px;
  display: flex;
}
.printer-content2{
  margin-top: 10px;
}
.app-check-tips{
  font-size: 14px;
  //font-weight: bold;
  color: #FF0000;
  margin-bottom: 20px;
  padding: 10px;
  width: 500px;
  border: 1px dotted #FF0000;
}
.gun-model-tips{
  font-size: 12px;
  color: #AAAAAA;
}
.order-content{
  display: flex;
  .left{
    margin-right: 20px;
  }
}
.listing-font{
  color: #333333;
  font-weight: bold;
}
.attr-font{
  color: #F5222D;
  font-size: 14px;
  font-weight: bold;
}
.title-font{
  font-size: 14px;
  color: #AAAAAA;
}
.scanner-body{
  .order-item{
    position: relative;

    .order-alert{
      position: absolute;
      top: 100px;
      left: 300px;
      width: 800px;
      .font-normal{
        color: #333333;
      }
    }
  }
}
.work-type-select{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-top: 30px;
  .work-type-box{
    width: 150px;
    margin-right: 30px;
    .work-type-card{
      border: 1px solid #cccccc;
      width: 150px;
      height: 150px;
      padding: 10px;
      cursor: pointer;
      .title{
        font-weight: bold;
        margin-bottom: 5px;
      }
      .work-img{
        text-align: center;
        img{
          width: 100px;
        }
      }
    }
    .work-type-title{
      margin-top: 5px;
      text-align: center;
      font-weight: bold;
    }
    .work-type-card:hover{
      background-color: #f6ffed;
    }
  }
}
.work-content{
  margin-top: 30px;
  .tips-text{
    color: #AAAAAA;
  }
}
.card-box{
  display: flex;
  .order-card-1{
    width: 1000px;
    height: 200px;
    .order-header-title{
      color: #FF0000;
      font-weight: bold;
      margin-bottom: 10px;
      margin-top: -5px;
    }
  }
  .order-card-2{
    width: 800px;
    height: 170px;
    .order-header-title{
      color: #FF0000;
      font-weight: bold;
      margin-bottom: 10px;
      margin-top: -5px;
    }
  }
  .order-weight-card{
    width: 500px;
    height: 170px;
    .order-weight-card-content{
      display: flex;
      flex-direction:column;
      height: 120px;
      justify-content: space-around;
    }
  }
  .order-return-card{
    width: 300px;
    height: 200px;
    background-color: #ffffed;
    .return-header-title{
      color: #FF0000;
      font-weight: bold;
      margin-bottom: 10px;
      margin-top: -5px;
    }
    .return-header-text{
      font-weight: bold;
      font-size: 20px;
      margin-top: 25px;
      margin-bottom: 25px;
    }
    .return-btn{
      margin-bottom: 10px;
    }
    .return-op-tips{
      font-size: 24px;
      font-weight: bold;
      color: #FF0000;
    }
  }
}
.return-order-list{
  margin-top: 30px;
  .return-order-item{
    display: flex;
    .left{
      margin-right: 30px;
    }
    .right{
      .goods-info-card{
        width: 890px;
        height: 190px;
        .goods-info-card-content{
          display: flex;
          height: 150px;
          flex-direction: column;
          justify-content: space-around;
          font-size: 16px;
          .goods-listing{
            font-weight: bold;
          }
          .goods-title{
            color: #AAAAAA;
          }
          .goods-SKU-info{
            color: #333333;
          }
          .goods-attr{
            color: #FF0000;
            font-weight: bold;
          }
          .return-input{
            font-size: 14px;
          }
        }

      }
    }
  }
}
.footer{
  position: fixed;
  bottom: 0;
  height: 55px;
  padding-left: 30px;
  padding-top: 10px;
  border-top: 1px solid #e6ebf5;
  background-color: #ffffff;
  z-index: 2000;
  width: calc(100% + 30px);
  margin-left: -30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

}
.font-orange{
  color: #E6A23C;
}

</style>
